<script lang="ts" setup>
   import { reactive,onMounted } from 'vue';
   import axios from 'axios'
   //定义数据
   let dogs = reactive<String[]>([]);
   //组件渲染完毕之后,能够有一些初始化的数据
   //{"message":"https:\/\/images.dog.ceo\/breeds\/cavapoo\/doggo4.jpg","status":"success"}
   
   onMounted(async()=>{
      for(let i=0;i<2;i++){
        let {data:{message:msg}} =await axios.get('https://dog.ceo/api/breeds/image/random')
        dogs.push(msg)
      }
   })
   async function getDog(){
    let {data:{message:msg}} =await axios.get('https://dog.ceo/api/breeds/image/random')
    dogs.unshift(msg)
   }
</script>
<template>
      <h3>Dog数据 - 获取Dog</h3>
      <button @click="getDog">添加一条狗</button>
      <ul>
        <li v-for="d in dogs">
            <img :src="d" alt="">
        </li>
      </ul>
</template>
<style>
    ul{
        list-style: none;
        padding-left: 0;
    }
    li{
        margin: 30px;
        display: inline-block;
    }
    img{
        width: 150px;
        height: 150px;
    }
</style>
